#@layout()
#define main()
<div style="padding: 16px;">
	<table class="layui-hide" id="test" lay-filter="test"></table>
</div>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add">新建</button>
    </div>
</script>
<script type="text/html" id="toolDemo">
	<div class="layui-clear-space">
		<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
		<a class="layui-btn layui-btn-xs" lay-event="more">
			更多
			<i class="layui-icon layui-icon-down"></i>
		</a>
	</div>
</script>

<script>
	layui.use(['table', 'dropdown','jquery'], function(){
		var table = layui.table;
		var dropdown = layui.dropdown;
        var $ = layui.jquery;
		// 创建渲染实例
		table.render({
			elem: '#test',
			url: '/task/data', // 此处为静态模拟数据，实际使用时需换成真实接口
            toolbar: '#toolbarDemo',
			defaultToolbar: ['filter', 'exports', 'print', { // 右上角工具图标
				title: '提示',
				layEvent: 'LAYTABLE_TIPS',
				icon: 'layui-icon-tips',
				onClick: function(obj) { // 2.9.12+
					layer.alert('自定义工具栏图标按钮');
				}
			}],
			height: 'full-180', // 最大高度减去其他容器已占有的高度差
			css: [ // 重设当前表格样式
				'.layui-table-tool-temp{padding-right: 145px;}'
			].join(''),
			cellMinWidth: 80,
			page: true,
			parseData: function(res){ // res 即为原始返回的数据
				console.log(res);
				return {
					"code": res.code===200?0:false, // 解析接口状态
					"msg": res.msg, // 解析提示文本
					"count": res.data.totalRow, // 解析数据长度
					"data": res.data.list // 解析数据列表
				};
			},
			cols: [[
				{field:'task_title', title: '任务标题', edit: 'input', minWidth: 220, maxWidth: 400,expandedWidth: 500},
				{field:'important', width:100, title: '重要程度'},
				{field:'flag', width:80, title: '状态'},
				{field:'note', title: '任务信息', edit: 'textarea', minWidth: 180, maxWidth: 400,expandedWidth: 500},
				{field:'feedback_note', title: '反馈信息',edit: 'textarea', minWidth: 180, maxWidth: 400,expandedWidth: 500},
				{field:'feedback_man', title:'反馈人',edit: 'input', minWidth: 140, maxWidth: 400,expandedWidth: 500},
				{field:'task_time', title:'任务时间', width: 220, templet : "<div>{{layui.util.toDateString(d.task_time, 'yyyy年MM月dd日 HH时mm分')}}</div>"},
				{field:'is_msg', title:'消息提示', width: 120},
				{field:'is_archiv', title:'是否归档', width: 120},
				{field:'archiv_time', title:'归档时间', width: 120, templet : "<div>{{layui.util.toDateString(d.archiv_time, 'yyyy年MM月dd日 HH:mm:ss')}}</div>"},
				{fixed: 'right', title:'操作', width: 134, minWidth: 125, templet: '#toolDemo'}
			]],
			done: function(){
				var id = this.id;
			},
			error: function(res, msg){
				console.log(res, msg)
			}
		});

		// 工具栏事件
		table.on('toolbar(test)', function(obj){
			var id = obj.config.id;
			var checkStatus = table.checkStatus(id);
			var othis = lay(this);
			switch(obj.event){
				case 'add':
                    layer.open({
                        title: '新建任务',
                        type: 2,
                        area: ['80%','80%'],
                        content: '/task/add'
                    });
					break;
			}
		});
		// 表头自定义元素工具事件 --- 2.8.8+
		table.on('colTool(test)', function(obj){
			var event = obj.event;
			console.log(obj);
			if(event === 'email-tips'){
				layer.alert(layui.util.escape(JSON.stringify(obj.col)), {
					title: '当前列属性选项'
				});
			}
		});

		// 触发单元格工具事件
		table.on('tool(test)', function(obj){ // 双击 toolDouble
			var data = obj.data; // 获得当前行数据
			// console.log(obj)
			if(obj.event === 'edit'){
				layer.open({
					title: '编辑任务 - id:'+ data.id,
					type: 2,
					area: ['80%','80%'],
					content: '/task/edit/'+data.id
				});
			} else if(obj.event === 'more'){
				// 更多 - 下拉菜单
				dropdown.render({
					elem: this, // 触发事件的 DOM 对象
					show: true, // 外部事件触发即显示
					data: [{
						title: '查看',
						id: 'detail'
					},{
						title: '删除',
						id: 'del'
					}],
					click: function(menudata){
						if(menudata.id === 'detail'){
							layer.msg('查看操作，当前行 ID:'+ data.id);
						} else if(menudata.id === 'del'){
							layer.confirm('真的删除行 [id: '+ data.id +'] 么', function(index){
								obj.del(); // 删除对应行（tr）的DOM结构
								layer.close(index);
								// 向服务端发送删除指令
							});
						}
					},
					id: 'dropdown-table-tool',
					align: 'right', // 右对齐弹出
					style: 'box-shadow: 1px 1px 10px rgb(0 0 0 / 12%);' // 设置额外样式
				});
			}
		});
		// table 滚动时移除内部弹出的元素
		var tableInst = table.getOptions('test');
		tableInst.elem.next().find('.layui-table-main').on('scroll', function() {
			dropdown.close('dropdown-table-tool');
		});

		// 单元格编辑事件
		table.on('edit(test)', function(obj){
			var field = obj.field; // 得到字段
			var value = obj.value; // 得到修改后的值
			var data = obj.data; // 得到所在行所有键值
            $.get('/task/updateField', { 'field': field, 'value': value, 'id': data.id })
                .done(function(data) {
                    if(data.code == 200){
                        layer.msg('编辑成功', {icon: 1});
                        // 其他更新操作
                        var update = {};
                        update[field] = value;
                        obj.update(update);
                    }
                    console.log('搜索结果:', data);
                });
		});
	});
</script>
#end